<script>
import {submitAdd} from "./js/addUserJs";
import {dictionaryRequest} from "../../../../util/js/globalRequestJs";

export default {
  name: 'AddUser',
  data(){
    return {
      user:{
        name : '',
        realName: '',
        sex: '',
        age: '',
        phone: '',
        identity: '',
        type: ''
      },
      types:[], // 用户类型
    }
  },
  mounted() {
    dictionaryRequest('user','type').then(res => {
      this.types = res.data;
    }).catch(error => {
      console.log(error);
    })
  },
  methods:{
    // 关闭弹窗
    closeAdd(){
      this.$emit('closeAdd');
    },
    // 新增用户
    addSubmit(){
      const _this = this;
      _this.$confirm('是否确认添加？','提示',{
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }).then(()=>{
        submitAdd(_this.user).then(res=>{
          if (res.code === '200') {
            _this.$message.success("添加成功!")
            _this.closeAdd();
          }else{
            _this.$message.error(res.msg);
          }
        }).catch(err => {
          _this.$message.error("系统出错了:"+err);
          console.log("系统出错了！",err)
        })
      }).catch(() => {
        _this.$message.info("已取消")
      })
    }
  }
}
</script>

<template>
  <div style="height: 700px;height: 500px;padding: 10px;">
    <h1 style="text-align: center;">新增用户</h1>
    <div>
      <el-descriptions class="margin-top" size="small" direction="vertical" :column="3" border style="text-align: center">
        <el-descriptions-item label="用户名">
          <el-input v-model="user.name" style="width: 120px;"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="真实姓名" >
          <el-input v-model="user.realName" style="width: 150px;"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-radio v-model="user.sex" label="1" value="1">男</el-radio>
          <el-radio v-model="user.sex" label="2" value="2">女</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          <el-input v-model="user.age" style="width: 120px;"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          <el-input v-model="user.phone" style="width: 150px;"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          <el-input v-model="user.identity" style="width: 175px"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="用户类型"  :span="2">
          <el-select v-model="user.type" placeholder="请选择" style="width: 400px">
            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div id="ul-add-bottom-submit">
      <el-button @click="closeAdd" type="primary" plain>取消</el-button>
      <el-button @click="addSubmit" type="primary" plain>提交</el-button>
    </div>
  </div>
</template>

<style scoped>
#ul-add-bottom-submit {
  position: relative;
  width: 160px;
  top: 60px;
  left: 50%;
  transform: translate(-50%);
}
</style>
